<template>
  <div id="app">
    <div class="navBar">
      <van-tabs
        :active="active"
        :border="false"
        line-width="24"
        color="#187798"
        sticky
        @change="tabChange"
        style="background: #f7f7f6ff;height:100%;position:absolute;width: 100%;"
      >
        <van-tab :title="item" @name="item" v-for="(item,i) in tabList" :key="i">
          <!-- 有订单 -->
          <div class="detail-content" v-if="queryOrder.length>0">
            <ul style="background: #f7f7f6ff;">
              <li
                v-for="(item1, index1) of queryOrder"
                class="product-item"
                :key="index1"
                style="display: flex; flex-direction: column; margin-bottom:10px"
              >
                <div @click="handlorder(item1.id)">
                  <div class="detail_time flex flex-pack-justify">
                    <span class="time">{{item1.gmtCreate}}</span>
                    <span
                      class="waitPay"
                      v-if="item1.orderStatus === 'TRADE' && item1.payStatus === 'UN_PAY'"
                    >待支付</span>
                    <span
                      class="waitPay"
                      v-if="item1.orderStatus === 'TRADE' && item1.payStatus === 'SUCCESS' &&  item1.logisticsStatus ==='UN_SEND'"
                    >待发货</span>
                    <span
                      class="waitPay"
                      v-if="item1.orderStatus === 'TRADE' && item1.payStatus === 'SUCCESS' &&  item1.logisticsStatus ==='SEND'"
                    >待收货</span>
                    <span class="waitPay" v-if="item1.orderStatus === 'SUCCESS'">已完成</span>
                    <span class="waitPay" v-if="item1.orderStatus === 'FAIL'">已取消</span>
                  </div>
                  <div class="oneOrder" v-for="(item2, index2) of item1.items" :key="index2">
                    <div class="cont-left">
                      <img :src="item2.goodsImg" class="product-image" />
                    </div>
                    <div class="cont-right flex">
                      <p class="goodsName line_ellipsis">{{item2.goodsName}}</p>
                      <p style="color:#868991;font-size: 12px">{{item2.goodsSkuName}}</p>
                      <div
                        class="integral flex"
                        style="justify-content:space-between;font-size:14px"
                      >
                        <span style="color:#F45247">{{item2.salePrice}}积分</span>
                        <span style="color:#86899">× {{item2.saleQuantity}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 备注 -->
                <div class="order_beizhu">
                  <div class="orderForm-num flex flex-pack-justify">
                    <span
                      style="color:#909292; font-size:13px;"
                    >合计：{{item1.items[0].saleQuantity * item1.items[0].salePrice}}积分</span>
                    <div class="order_btns flex">
                      <div
                        v-if="item1.orderStatus === 'TRADE' && item1.payStatus === 'UN_PAY'"
                        class="cancelOrder"
                        @click="cancelOrderL(item1.id)"
                      >取消订单</div>
                      <div
                        v-if="item1.orderStatus === 'TRADE' && item1.payStatus === 'UN_PAY'"
                        class="nowPay"
                        @click="handlePay(item1.id)"
                      >立即支付</div>
                      <div
                        v-if="item1.orderStatus === 'TRADE' && item1.payStatus === 'SUCCESS' &&  item1.logisticsStatus ==='SEND'"
                        class="cancelOrder"
                        @click="confirmReceiveClick(item1.id)"
                      >确认收货</div>
                      <div
                        v-if="item1.orderStatus === 'FAIL' || item1.orderStatus === 'SUCCESS'"
                        class="cancelOrder"
                        @click="cancel(item1.id)"
                      >删除订单</div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- 无订单 -->
          <div class="order_no" v-if="queryOrder.length===0 && !loadMore">
            <img src="/static/images/personalCenter/nothingOrder.png" alt />
            <p>您当前暂无相关订单</p>
          </div>
        </van-tab>
        <div class="store_footer" v-if="queryOrder.length>0 && !loadMore">—— 已经到底啦 ——</div>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import {
  queryOrder,
  info,
  cancelOrder,
  deleteOrder,
  confirmReceive,
  payNow
} from '@/api/api';
export default {
  props: {},
  data () {
    return {
      tabList: ['全部', '待支付', '待发货', '待收货', '已完成', '已取消'],
      // 订单
      active: 0,
      queryOrder: [], // 查询所有订单
      // 订单列表分页
      pages: {
        pageIndex: 1,
        pageSize: 10
      },
      loadMore: true,
      unPayOrder: [], // 待支付
      unSendOrder: [], // 待发货
      unReceveOrder: [], // 待收货
      finishOrder: [], // 完成
      cancelOrder: [], // 取消
      userInfo: {}
    };
  },
  computed: {},
  created () {},
  mounted () {
    // Object.assign(this.$data, this.$options.data());
  },
  onShow () {
    this.info();
    this.pages.pageIndex = 1;
    this.queryOrder = [];
    this.loadMore = true;
    this.getQueryOrder(this.pages);
  },
  watch: {},
  // 上拉加载更多
  onReachBottom () {
    this.getQueryOrder(this.pages);
  },
  methods: {
    // 获取订单列表
    async getQueryOrder (data) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      if (this.loadMore) {
        await queryOrder(data).then(res => {
          console.log('queryOrder', res.list);
          res.list.forEach(item => {
            item.gmtCreate = this.formatDate(new Date(item.gmtCreate));
          });
          this.queryOrder = this.queryOrder.concat(res.list);
          ++this.pages.pageIndex;
          if (res.pages < this.pages.pageIndex) {
            this.loadMore = false;
          }
        });
      }
      wx.hideLoading();
    },
    // tabList切换
    tabChange (event) {
      // 1待支付 2待发货 3待收货 5已完成 6已取消
      this.active = event.target.index;
      this.activeIndex = event.target.index;
      if (this.activeIndex === 0) {
        delete this.pages.queryStatus;
      }
      if (this.activeIndex === 1) {
        this.pages.queryStatus = '1';
      }
      if (this.activeIndex === 2) {
        this.pages.queryStatus = '2';
      }
      if (this.activeIndex === 3) {
        this.pages.queryStatus = '3';
      }
      if (this.activeIndex === 4) {
        this.pages.queryStatus = '5';
      }
      if (this.activeIndex === 5) {
        this.pages.queryStatus = '6';
      }
      this.pages.pageIndex = 1;
      this.queryOrder = [];
      this.loadMore = true;
      this.getQueryOrder(this.pages);
      console.log('tabList切换', event.target);
    },
    /**
     * 确认收货
     */
    // confirmReceiveClick () {
    //   let _this = this;
    //   wx.showModal({
    //     title: '',
    //     content: '是否确认收货？',
    //     cancelText: '否',
    //     confirmText: '是',
    //     success (res) {
    //       if (res.confirm) {
    //         _this.confirmReceive();
    //       } else if (res.cancel) {
    //       }
    //     }
    //   });
    // },
    // async confirmReceive () {
    //   wx.showLoading({
    //     title: '加载中',
    //     mask: true
    //   });
    //   let data = await confirmReceive({ id: this.order.id });
    //   wx.hideLoading();
    //   if (!data.code) {
    //     // if (this.type == 1) {
    //     //   this.queryOrder[this.position].orderStatus = "SUCCESS";
    //     // } else {
    //     //   this.unReceveOrder[this.position].orderStatus = "SUCCESS";
    //     // }
    //     // this.order.splice(this.position, 1);
    //     this.queryOrder();
    //   } else {
    //     wx.showToast({
    //       title: data.description,
    //       icon: 'none',
    //       duration: 2000
    //     });
    //   }
    // },

    // 确认收货
    confirmReceiveClick (id) {
      let _this = this;
      wx.showModal({
        title: '',
        content: '是否确认收货？',
        cancelText: '否',
        confirmText: '是',
        success (res) {
          if (res.confirm) {
            _this.confirmReceive(id);
          } else if (res.cancel) {
          }
        }
      });
    },
    async confirmReceive (id) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      await confirmReceive({ id }).then(res => {
        wx.hideLoading();
        this.pages.pageIndex = 1;
        this.queryOrder = [];
        this.loadMore = true;
        this.getQueryOrder(this.pages);
      });
    },
    // 删除订单
    cancel (id) {
      let _this = this;
      wx.showModal({
        title: '',
        content: '是否删除该订单？',
        cancelText: '否',
        confirmText: '是',
        success (res) {
          if (res.confirm) {
            _this.deleteOrder(id);
          } else if (res.cancel) {
          }
        }
      });
    },
    async deleteOrder (id) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      // let data = await deleteOrder({ id: this.queryOrder[0].id });
      await deleteOrder({ id }).then(res => {
        wx.hideLoading();
        this.pages.pageIndex = 1;
        this.queryOrder = [];
        this.loadMore = true;
        this.getQueryOrder(this.pages);
        // console.log('data:', data);
      });
      // if (!data.code) {
      //   this.getQueryOrder(this.pages);
      // } else {
      //   wx.showToast({
      //     title: data.description,
      //     icon: 'none',
      //     duration: 2000
      //   });
      // }
    },
    // 取消订单
    cancelOrderL (id) {
      console.log(id, 'dddd');
      let _this = this;
      wx.showModal({
        title: '',
        content: '是否取消该订单？',
        cancelText: '否',
        confirmText: '是',
        success (res) {
          if (res.confirm) {
            _this.doCancelOrder(id);
          } else if (res.cancel) {
          }
        }
      });
    },
    async doCancelOrder (id) {
      wx.showLoading({
        title: '加载中',
        mask: true
      });
      // let data = await cancelOrder({ id: this.queryOrder[0].id });
      await cancelOrder({ id }).then(res => {
        wx.hideLoading();
        this.pages.pageIndex = 1;
        this.queryOrder = [];
        this.loadMore = true;
        this.getQueryOrder(this.pages);
        console.log('取消订单', res);
        // if (!res.code) {
        //   //   // if (this.type == 1) {
        //   //   //   this.queryOrder[this.position].orderStatus = "FAIL";
        //   //   // } else {
        //   //   //   this.unPayOrder[this.position].orderStatus = "FAIL";
        //   //   // }
        //   //   // this.order.splice(this.position, 1);
        //   this.queryOrder();
        // } else {
        //   wx.showToast({
        //     title: res.description,
        //     icon: 'none',
        //     duration: 2000
        //   });
        // }
      });
    },
    // 处理时间
    formatDate (now) {
      let year = this.twoNum(now.getFullYear());
      let month = this.twoNum(now.getMonth() + 1);
      let date = this.twoNum(now.getDate());
      let hour = this.twoNum(now.getHours());
      let minute = this.twoNum(now.getMinutes());
      let second = this.twoNum(now.getSeconds());
      return `${year}-${month}-${date}  ${hour}:${minute}:${second}`;
    },
    twoNum (x) {
      if (x < 10) {
        return '0' + x;
      } else {
        return x;
      }
    },
    // 立即支付
    handlePay (id) {
      let that = this;
      wx.showModal({
        content: '商品一经销售概不退换，是否确认购买？',
        success: function (res) {
          if (res.confirm) {
            that.payNow(id);
          }
          if (res.cancel) {
          }
        }
      });
    },
    async payNow (id) {
      await payNow({ id }).then(res => {
        console.log('立即支付', res);
        wx.navigateTo({
          url: `/pages/store/children/paySuccess/main?id=${id}`
        });
      });
    },
    /**
     * 获取用户积分信息
     */
    async info () {
      let data = await info();
      if (!data.code) {
        this.userInfo = data;
      }
    },
    /**
     * 跳转到订单详情页
     *  */
    handlorder (id) {
      wx.navigateTo({
        url: `/pages/PersonalCenter/userChildren/myOrder/orderDetail/main?id=${id}`
      });
    }
  },
  components: {}
};
</script>

<style scoped lang="less">
#app {
  background-color: #f7f7f6;
}
// tab栏
.navBar /deep/.van-tab--active .van-ellipsis {
  font-size: 16px;
  font-family: PingFangSC;
  letter-spacing: 3px;
  font-weight: 700;
  color: rgba(24, 119, 152, 1);
}
.navBar /deep/ .van-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: 3px;
  font-size: 13px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(144, 146, 146, 1);
}
.navBar /deep/ .van-tabs__line {
  // width: 20px !important;
  bottom: 0;
  left: 0;
  // -webkit-transform: translateX(22px) !important;
  // transform: translateX(22px) !important;
  // transition-duration: 0.3s !important;
  // -webkit-transition-duration: 0.3s !important;

  z-index: 1;
  height: 4px;
  // background-color: #ee0a24;
  border-radius: 3px;
}
.navBar {
  width: 100%;
  overflow: hidden;
  // margin-bottom: 17px;
  background-color: #fff;
  overflow-x: scroll;
}

// 订单详情内容
.detail-content {
  // background-color: #fff;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(2, 6, 4, 0.06);
  border-radius: 2px;
  margin: 15px 15px 0;

  .product-item {
    width: 100%;
    // height: 163px;
  }
}

ul {
  box-sizing: border-box;

  & li:last-child {
    border-bottom: none;
  }

  li {
    // border-bottom: 1px solid #f2f3f4;
    padding: 15px 15px 0;
    box-sizing: border-box;
    background-color: #fff;
    .cont-left {
      width: 100px;
      height: 100px;
      background-color: #f7f7f8;
      float: left;
      margin-right: 15px;
      .product-image {
        width: 100px;
        height: 100px;
      }
    }
  }
}

.order_beizhu {
  // margin-left: 15px;
  // margin-right: 15px;
  box-sizing: border-box;
  background-color: #f7f7f8;
  margin-top: 20px;
}

.orderForm-num {
  height: 60px;
  line-height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;

  .cancelOrder {
    width: 80px;
    height: 30px;
    border-radius: 2px;
    border: 1px solid rgba(24, 119, 152, 1);
    text-align: center;
    line-height: 30px;
    font-size: 13px;
    color: rgba(24, 119, 152, 1);
  }

  .nowPay {
    width: 80px;
    height: 30px;
    background: rgba(50, 114, 137, 1);
    border-radius: 2px;
    text-align: center;
    line-height: 30px;
    margin-left: 10px;
    font-size: 13px;
    color: #ffffff;
  }
}

.detail_time {
  height: 33px;
  font-size: 13px;

  .time {
    font-weight: 400;
    color: rgba(144, 146, 146, 1);
  }

  .waitPay {
    font-weight: 400;
    color: rgba(24, 119, 152, 1);
  }
}

.store_footer {
  // height: 63px;
  // line-height: 63px;
  // text-align: center;
  // font-size: 13px;
  // font-weight: 400;
  // color: #b8bab9;
  height: 74px;
  font-size: 13px;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 700;
  color: #b8bab9;
  line-height: 74px;
  text-align: center;
  background: #f7f7f6ff;
  margin-top: -10px;
}

// 没有订单
.order_no {
  text-align: center;

  img {
    width: 230px;
    height: 175px;
    margin-top: 90px;
    margin-bottom: 40px;
  }

  p {
    font-size: 14px;
    font-weight: 400;
    color: rgba(144, 146, 146, 1);
  }
}
.oneOrder {
  width: 100%;
  .cont-left {
    width: 100px;
    height: 100px;
    background-color: #f7f7f8;
    float: left;
    margin-right: 15px;
    .product-image {
      width: 100px;
      height: 100px;
    }
  }
  .cont-right {
    height: 100px;
    flex-direction: column;
    justify-content: space-between;
    .goodsName {
      color: #081020;
      font-weight: bold;
      font-size: 14px;
    }
  }
}
</style>
